<template>
  <div
    class="in-dialog"
    :style="style"
    :class="[props.theme, klass]"
    v-show="props.show"
    ref="dialog"
  >
    <div class="p-2">
      <div class="flex justify-between cursor-move py-4" @mousedown="mousedown">
        <div>{{ props.title }}</div>
        <div><CloseCircleFilled @click="close" /></div>
      </div>
      <a-divider class="my-2"></a-divider>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseCircleFilled } from "@ant-design/icons-vue";
import { computed, nextTick, onMounted, onUpdated, ref } from "vue";

const props = defineProps({
  left: {
    type: [String, Number],
    default: 0
  },
  top: {
    type: [String, Number],
    default: 0
  },
  theme: {
    type: String,
    default: "light"
  },
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String
  },
  /* 移动端居中显示 */
  center: {
    type: Boolean
  }
});
const emits = defineEmits(["update:show"]);
const close = () => {
  emits("update:show", false);
};
const dialog = ref();
/* 类 */
const klass = computed(() => {
  return [props.center ? "dialog-center" : ""];
});

const style = computed(() => {
  var { x, y } = offset.value;
  var { top, left } = props;

  return {
    top: Number(top) + y + "px",
    left: Number(left) + x + "px"
  };
});

/**
 * todo:拖拽开始
 */

const offset = ref({
  x: 0,
  y: 0
});
/* 拖拽记录点 */
const dragConfig = {
  canDrag: false,
  start: {
    x: 0,
    y: 0
  },
  end: {
    x: 0,
    y: 0
  }
};

/* 鼠标按下监听事件 */
const mousedown = (e: MouseEvent) => {
  dragConfig.canDrag = true;
  window.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);
  var el = dialog.value as HTMLElement;
  var { left, top } = el.getBoundingClientRect();
  dragConfig.start.x = e.x - dragConfig.end.x;
  dragConfig.start.y = e.y - dragConfig.end.y;
};
/* 鼠标滑动事件 */
// function range(loc: number, min: number, max: number) {
//   if (loc > max) {
//     return max;
//   } else if (loc < min) {
//     return min;
//   } else {
//     return loc;
//   }
// }

function mousemove(e: MouseEvent) {
  if (dragConfig.canDrag) {
    offset.value.x = e.x - dragConfig.start.x;
    offset.value.y = e.y - dragConfig.start.y;
  }
}

/* 鼠标弹起事件 */
function mouseup() {
  dragConfig.canDrag = false;
  dragConfig.end.x = offset.value.x;
  dragConfig.end.y = offset.value.y;
  window.removeEventListener("mousemove", mousemove);
  window.removeEventListener("mouseup", mouseup);
}
</script>

<style lang="scss" scoped>
.in-dialog {
  position: absolute;
  left: 0;
  color: #444;
  z-index: 10;
  border-radius: 4px;
  min-width: 300px;
}
.dialog-center {
  position: absolute;
}
.light {
  background-color: white;
  border: 1px solid #eee;
}
.dark {
  background-color: #444;
  border: 1px solid #666;
  color: white;
}

@media screen and (max-width: 500px) {
  .in-dialog {
    width: 90% !important;
    left: 5% !important;
    top: 30% !important;
  }
  .dialog-center {
    position: fixed;
  }
}
</style>
